<template>
  <div style="padding:5px">
    <el-form :model="form" ref="form" size="normal" label-width="80px">
      <el-row :gutter="20">
        <el-col :span="20" :offset="0">
          <el-form-item label="单位名称:">
            <el-select v-model="searchName" value-key="searchName" clearable class="wid">
              <el-option v-for="item in unitType" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="4" :offset="0">
          <el-button type="primary" size="default" @click="search">查询</el-button>
        </el-col>
      </el-row>
    </el-form>
    <div style="text-align: end ">
      <div class="DataList" style="margin-bottom: 10px">
        <div class="item one">
          序号
        </div>
        <div class="item two">
          项目名称
        </div>
        <div class="item three">
          申请金额
        </div>
        <div class="item four">
          审核资金
        </div>
        <div class="item five">
          核减资金
        </div>
      </div>
      <vue-seamless-scroll :data="list" class="seamless-warp" :class-option="classOption">
        <ul>
          <li class="DataList" v-for="(item,index) in list" :key="index">
            <div class="item one">{{index+1}}</div>
            <div class="item two">{{item.projectName}}</div>
            <div class="item three">{{item.servicePreAmount}}</div>
            <div class="item four">{{item.thirdCheckAmount}}</div>
            <div class="item five">{{item.checkMoney}}</div>
          </li>
        </ul>
      </vue-seamless-scroll>
    </div>
  </div>
</template>
<script>
import vueSeamless from 'vue-seamless-scroll'

export default {
  name: '',
  components: {
    vueSeamless
  },
  props: {

  },
  data () {
    return {
      searchName: '',
      unitType: [],
      form: {},
      list: [],
    }
  },
  created () {

  },
  mounted () {
    this.init()
  },
  methods: {
    async init () {
      const res = await this.$http('verifyReportList', {
        name: this.searchName
      })
      this.list = res
      if (!this.searchName) {
        res.forEach(item => {
          this.unitType.push({
            value: item.name,
            label: item.name
          })
        });
        this.unitType = this.$util.getUnique(this.unitType)
      }
    },
    search () {
      this.init()
    }
  },
  computed: {
    classOption () {
      return {
        step: 0.25, // 数值越大速度滚动越快
        limitMoveNum: 5, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        // openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        // singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
        autoPlay: true
      }
    }
  }
}
</script>
<style lang='scss' scoped>
.title {
  margin: 10px 30px;
}
.view {
  width: 100%;
  height: 30rem;
}
.seamless-warp {
  width: 100%;
  height: 22rem;
  overflow: hidden;
}
ul {
  padding: 0;
}

.DataList {
  list-style: none;
  width: 100%;
  height: 2rem;
  background-color: #4383c1;
  margin-top: 0.3rem;
  color: white;
  font-size: 1rem;
  display: flex;
  align-items: center;
  .item {
    float: left;
    font-size: 1px;
    text-align: center;
  }
  .one {
    width: 10%;
  }
  .two {
    /*font-size: 1px;*/
    width: 45%;
    margin-left: 1%;
  }
  .three {
    width: 15%;
    margin-left: 1%;
  }

  .four {
    width: 15%;
    margin-left: 1%;
  }
  .five {
    width: 15%;
    margin-left: 1%;
    color: greenyellow;
  }
}
</style>
